<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐列表</title>
    <link rel="stylesheet" href="./css/music.css">
    <link rel="icon" type="image/x-icon" href="./images/logo.webp">
</head>

<body id="body">
    <div class="container">
        <div class="logo-container">
            <div class="music-logo"></div>
        </div>

        <h1 class="app-title">在线音乐服务器</h1>

        <div class="search-section">
            <form class="search-form">
                <input type="text" class="search-input" id="exampleInputName2" placeholder="输入歌曲名称搜索...">
                <button type="button" id="submit1" class="btn btn-primary" onclick="searchMusic()">搜索</button>
            </form>
            <div class="action-buttons">
                <a href="./music-love.html" class="btn btn-outline">喜欢列表</a>
                <a href="./upload-music.html" class="btn btn-primary">添加歌曲</a>
                <button id="delete" class="btn btn-outline" onclick="deleteMusicChecked()">删除选中</button>
            </div>
        </div>

        <table class="music-table">
            <thead>
                <tr>
                    <th style="width: 50px;">选择</th>
                    <th>歌名</th>
                    <th>歌手</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="info">
                <!-- 数据将通过 JavaScript 动态加载 -->
            </tbody>
        </table>
    </div>
    <script src="/js/jquery-3.7.1.min.js"></script>

    <script type="text/javascript">
        // 页面加载完成，就去获取音乐信息填充页面
        $(function () {
            load();
        });

        // 搜索音乐
        function searchMusic() {
            let musicName = $("#exampleInputName2").val();
            load(musicName);
        }


        // musicName可以传参  也可以不传参数
        function load(musicName) {

            $.ajax({
                url: "/music/findMusic",
                data: { "selectName": musicName },
                type: "GET",
                success: function (result) {
                    // 清空表格
                    $("#info").empty();

                    let data = result.data; // 数组

                    let s = '';
                    let displayData = data;

                    // 如果数据超过4个，随机选择4个
                    if (data.length > 3) {
                        // 创建数组副本并随机排序
                        displayData = [...data].sort(() => Math.random() - 0.5).slice(0, 3);
                    }

                    // 显示选中的音乐
                    for (let i = 0; i < displayData.length; i++) {
                        let musicUrl = displayData[i].url + ".mp3";

                        s += '<tr>';
                        s += '<td><input type="checkbox" class="checkbox-custom" id="' + displayData[i].musicId + '"></td>';
                        s += '<td>' + displayData[i].musicName + '</td>';
                        s += '<td>' + displayData[i].singer + '</td>';
                        s += '<td class="action-buttons">';
                        s += '<button class="btn btn-primary" onclick="playerSong(\'' +musicUrl+ '\')">播放</button>';
                        s += '<button class="btn btn-outline" onclick="deleteInfo(' + displayData[i].musicId + ')">删除</button>';
                        s += '<button class="btn btn-outline" onclick="loveInfo(' + displayData[i].musicId + ')">收藏</button>';
                        s += '</td>';
                        s += "</tr>";
                    }

                    // 如果数据超过4个，添加提示信息
                    if (data.length > 3) {
                        s += '<tr><td colspan="4" style="text-align: center; padding: 15px; color: #666;">';
                        s += '当前共有 ' + data.length + ' 首音乐，随机展示其中 3 首';
                        s += '</td></tr>';
                    }

                    $("#info").html(s);
                },
                error: function (xhr) {
                    if (xhr.status == 401) {
                        alert('用户未登录');
                        location.href = './login.html';
                    } else {
                        alert('HTTP请求失败,状态码为: ' + xhr.status);
                    }
                }
            });
        }

        function playerSong(musicUrl) {

            //musicUrl:播放的音乐的地址  name:播放的音乐的名称，0：播放的开始时间  false:不自动播放
            // /music/get?path=北京东路的日子
            // 当传入该参数时，这个组件就会去请求 /music/get 接口，并携带参数为 path=北京东路的日子
            SewisePlayer.toPlay(musicUrl, name, 0, true);
        }

        // 删除音乐
        function deleteInfo(musicId) {
            console.log(musicId);
            $.ajax({
                url: "/music/delete",
                type: "PUT",
                data: { "musicId": musicId },
                success: function (result) {
                    console.log(result);

                    if (result.data) {
                        //删除成功！
                        alert("删除成功!");
                        location.href = "./music.html";
                    } else {
                        alert("删除失败! "+result.message);
                    }
                },
                error: function (xhr) {
                    if (xhr.status == 401) {
                        alert('用户未登录');
                        location.href = './login.html';
                    } else {
                        alert('HTTP请求失败,状态码为: ' + xhr.status);
                    }
                }
            });
        }


        // 删除选中的音乐
        function deleteMusicChecked() {
            // 1、获取被选中的音乐
            let musicIds = [];
            $("input:checkbox").each(function () {
                if ($(this).is(":checked")) {
                    musicIds.push($(this).attr("id"));
                }
            });
            if (musicIds.length == 0) {
                alert("请至少选择一首音乐");
                return;
            }
            // 2、删除音乐
            $.ajax({
                type: "PUT",
                url: "/music/deleteBatch",
                data: { "musicIds": musicIds },
                success: function (result) {
                    console.log(result);
                    if (result.data) {
                        alert("删除成功!");
                        location.href = "./music.html";
                    } else {
                        alert("删除失败! "+result.message);
                    }
                },
                error: function (xhr) {
                    if (xhr.status == 401) {
                        alert('用户未登录');
                        location.href = './login.html';
                    } else {
                        alert('HTTP请求失败,状态码为: ' + xhr.status);
                    }
                }
            })
                
        }

        // 收藏音乐
        function loveInfo(musicId) {

            $.ajax({
                url: "/musicLove/collect",
                type: "POST",
                data: { "musicId": musicId },

                success: function (result) {
                    if (result.data) {
                        alert("收藏成功！");
                        location.href = "./music.html";
                    } else {
                        alert("收藏失败！");
                    }
                },
                error: function (xhr) {
                    if (xhr.status == 401) {
                        alert('用户未登录');
                        location.href = './login.html';
                    } else {
                        alert('HTTP请求失败,状态码为: ' + xhr.status);
                    }
                }
            });
        }


    </script>
</body>

<div style="width: 180px; height: 140px; position:absolute; bottom:10px; right:10px">
    <script type="text/javascript" src="./player/sewise.player.min.js"></script>
    <script type="text/javascript">
        SewisePlayer.setup({
            server: "vod",
            type: "mp3",
            //这里是默认的一个网址
            videourl: "http://jackzhang1204.github.io/materials/where_did_time_go.mp3",
            skin: "vodWhite",
            //这里需要设置false
            autostart: "false",
        });
    </script>

</div>

</html>